<template>
  <!-- 选择表格 -->
  <div>
    <template v-if="handleType === 'scan'">
      <span class="scan-text">{{ selectLabel }}</span>
    </template>
    <template v-else>
      <div class="form-checkbox-input">
        <div class="tag-wrapper" v-for="item in tags" :key="item.item_value">
          <el-tag type="info" @click="selectHandle(item)" :class="{ active: selected[item.item_value] !== undefined }">
            {{ item.item_text }}
          </el-tag>
          <el-input
            v-model="selected[item.item_value]"
            :disabled="selected[item.item_value] === undefined"
            maxlength="20"
            placeholder="请输入内容"
          ></el-input>
        </div>
      </div>
    </template>
  </div>
  <!-- 选择表格 -->
</template>

<script>
  import { queryDict } from '@/api/common';
  export default {
    components: {},
    props: {
      // clone克隆、edit编辑、scan查看
      handleType: {
        type: String
      },
      action: {
        type: Object,
        default: () => {
          return {};
        }
      },
      selected: {
        type: Object,
        default: () => {
          return {};
        }
      }
    },
    data() {
      return {
        tags: [],
        selectLabel: ''
      };
    },
    watch: {
      selected: {
        async handler(val) {
          if (this.action && this.action.eicParameter) {
            const { data } = await queryDict({ dict: this.action.eicParameter });
            if (data.success) {
              this.tags = data.result || [];
              this.filterHande();
            }
          }
        }
      }
    },
    computed: {},
    methods: {
      selectHandle(item) {
        const newSelected = JSON.parse(JSON.stringify(this.selected));

        const isExist = newSelected[item.item_value] !== undefined;

        if (isExist) {
          delete newSelected[item.item_value];
        } else {
          newSelected[item.item_value] = '';
        }
        this.$emit('selectChange', { eicCode: this.action.eicCode, value: newSelected });
      },
      filterHande() {
        if (this.handleType !== 'scan') {
          return;
        }
        let list = [];
        this.tags.forEach((e) => {
          const item = this.selected[e.item_value];
          if (item) {
            list.push(`${e.item_text}-${item}`);
          }
        });
        this.selectLabel = list.join(',');
      }
    },
    created() {},
    mounted() {}
  };
</script>
<style lang="scss">
  .form-checkbox-input {
    display: flex;
    flex-direction: column;
    width: 100%;
    .tag-wrapper {
      border-bottom: 1px solid #e4e4e4;
      flex: 1;
      display: flex;
    }
    .el-tag {
      margin: 5px;
      &.active {
        background: #409eff;
        color: #fff;
      }
    }
  }
</style>
